<template>
	<view class="user-container">
		<view class="user-avater flex flex-row flex-nowrap flex-align-center">
			<view class="line"></view>
			<u-avatar
				:text="userinfo.name.slice(0, 1)"
				fontSize="18"
				randomBgColor
				colorIndex="19"
				class="mr-10"
			></u-avatar>
			<text>{{ userinfo.name }}</text>
		</view>
		<ul class="user-list">
			<li v-for="item in list" :key="item.title" @tap="goTo(item)">
				<Acard pad="10px 20px">
					<view class="user-card-content">
						<u--text
							:text="' ' + item.title"
							color="#fff"
							:prefixIcon="item.icon"
							iconStyle="color:#fff"
							lines="1"
						></u--text>
						<u-icon name="arrow-right" color="#fff"></u-icon>
					</view>
				</Acard>
			</li>
			<li @tap="quit">
				<Acard pad="10px 20px">
					<view class="user-card-content">
						<u--text
							text="退出"
							color="#fff"
						></u--text>
						<u-icon name="arrow-right" color="#fff"></u-icon>
					</view>
				</Acard>
			</li>
		</ul>
		<ParticleBackground></ParticleBackground>
		<Tabbar></Tabbar>
	</view>
</template>

<script>
import { mapState } from 'vuex'//引入mapState
export default {
	name: 'index',
	data() {
		return {
			list: [
				{ title: '个人信息', path: 'pages/user/info/info', icon: 'account',needJoinSociety:false },
				{ title: '我的社团', path: 'pages/user/MySociety/MySociety', icon: 'home',needJoinSociety:true },
				{ title: '申请社团', path: 'pages/user/Request/Request', icon: 'file-text',needJoinSociety:false },
				{ title: '我的申请', path: 'pages/user/MyRequest/MyRequest', icon: 'file-text-fill',needJoinSociety:false },
				{ title: '历史活动', path: 'pages/user/HistoryActivity/HistoryActivity', icon: 'bookmark-fill',needJoinSociety:true },
				{ title: '反馈', path: 'pages/user/feedback/feedback', icon: 'edit-pen-fill',needJoinSociety:true },
			],
		};
	},
	computed:{
		...mapState('user',['userinfo'])
	},
	methods:{
		quit(){
			uni.redirectTo({
				url:'/pages/login/index',
				success() {
					uni.clearStorage();
				}
			})
		},
		goTo(item){
			if (this.userinfo.society_id !== '0' || !item.needJoinSociety){
				if(this.userinfo.society_id == '0' || (item.path !== 'pages/user/Request/Request' && item.path !== 'pages/user/MyRequest/MyRequest')){
					uni.navigateTo({
						url:item.path
					})
				}else{
					uni.showToast({
						title:'请先退出当前社团',
						icon:'error',
						duration:2000
					})
				}
			}else{
				uni.showToast({
					title:'还未加入社团',
					icon:'error',
					duration:2000
				})
			}
			
		}
	}
};
</script>

<style scoped lang="scss">
.user {
	&-avater {
		margin: 0 30rpx 40rpx 30rpx;
		.line {
			margin-right: 20rpx;
			width: 6px;
			height: 50px;
			background: #9bd2bd;
			border-radius: 3px;
			box-shadow: 0 0 10px rgb(155, 210, 189);
			animation: FpulseSlowB infinite alternate 1s linear;
		}
	}
	&-container {
		height: 100vh;
		color: #fff;
		padding-top: 30rpx;
	}

	&-list {
		display: flex;
		flex-flow: column nowrap;
		margin-top: 20rpx;
		padding: 40rpx;
		li {
			margin-bottom: 20rpx;
		}
	}

	&-card-content {
		display: flex;
		flex-flow: row nowrap;
		justify-content: space-between;
	}
}
</style>
